<template>
  <div class="home-nav">
    <div class="menu">
      <a-menu mode="horizontal">
        <a-menu-item key="mail" @click="goMainpage"> 个人主页 </a-menu-item>
      </a-menu>
    </div>
        <div class="myop">
      <a-menu mode="horizontal" @select="selectCurrUser" >
        <a-sub-menu>
          <template #title>
            <a-avatar
              v-if="currImageUrl"
              @click="setAvatar"
              :src="currImageUrl"
              style="vertical-align: middle"
            />
            <span v-else style="vertical-align: middle; cursor: pointer">
              <smile-outlined />
              <a @click="setAvatar" style="font-size: 14px; color: #aa0000">
                设置头像
              </a>
            </span>
            <span>&nbsp;&nbsp;</span>
            <span style="vertical-align: middle"
              >{{ currUser.userId }}【
              <b v-if="currUser.userName" style="color:#0458a7;">
              {{ currUser.userName }}
              </b>】
              </span
            >
          </template>
          <a-menu-item key="people">个人信息</a-menu-item>
          <a-menu-item key="password">密码修改</a-menu-item>
          <a-menu-item key="exit">退出系统</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
  </div>

  <a-modal v-model:visible="visible" title="设置新头像" @ok="execUpload">
    <a-upload
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      :before-upload="() => false"
      @change="handleChange"
    >
      <img v-if="imageUrl" :src="imageUrl" />
      <div v-else>
        <plus-outlined />
        <div class="ant-upload-text">选择文件或拖动至此处</div>
      </div>
    </a-upload>
  </a-modal>

  <router-view></router-view>
</template>

<script setup>
////////////////////////////////////////////
import { reactive, ref } from "vue";
import {
  post,
  get,
  del,
  getBlob,
  tip,
  removeLocalToken,
  getLocalToken,
} from "@/common";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import {
  SmileOutlined,
  AppstoreOutlined,
  SettingOutlined,
  AppstoreAddOutlined,
} from "@ant-design/icons-vue";
////////////////////////////////////////////
const router = useRouter();

const goMainpage = () => {
  router.push({ path: "/demander/mainpage" });
};

const goEditquestion = () => {
  router.push({ path: "/demander/editquestion" });
};

goMainpage();

//获得当前用户
const currUser = ref({});

const getCurrUser = () => {
  get("/avatar/get_curr-user", {}, { loading: false }).then((res) => {
    currUser.value = res.data;
    console.log("当前用户");
    console.log(currUser.value);
    getAvatar();
  });
};
getCurrUser();

//获得头像
const currImageUrl = ref("");
const getAvatar = () => {
  if (!currUser.value || !currUser.value.avatar) {
    return;
  }
  getBlob(
    "/avatar/avatar/" + currUser.value.avatar,
    {},
    { loading: false }
  ).then((blob) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      currImageUrl.value = reader.result;
    });
    reader.readAsDataURL(blob);
  });
};

const avatarFile = ref(null);
const imageUrl = ref("");
const visible = ref(false);

const setAvatar = () => {
  visible.value = true;
};

const handleChange = (info) => {
  avatarFile.value = info.file;
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    imageUrl.value = reader.result;
  });
  reader.readAsDataURL(info.file);
};

const execUpload = () => {
  const token = getLocalToken();
  console.log("wdnmd");
  console.log(token);
  if (!avatarFile.value) {
    tip.error("请选择头像！");
    return;
  }
  const formData = new FormData();
  formData.append("avatar", avatarFile.value);
  post("/avatar/setavatar", formData).then((res) => {
    tip.success("头像设置成功！");
    visible.value = false;
    getCurrUser();
  });
};

const selectCurrUser = ({ item, key, selectedKeys }) => {
  switch (key) {
    case "exit": //退出系统
      removeLocalToken();
      tip.success("您已成功退出系统，请重新登录！");
      router.push({ path: "/" });
      break;

    case "password": //修改密码简易版
      router.push({ path: "/security/updatepassword" });
      break;

    case "people":
      router.push({ path: "/security/updateInfo" });
      break;
  }
};
</script>

<style>
.home-nav {
  height: 48px;
  width: 100%;
  text-align: center;
  box-shadow: 0px 10px 1px rgba(0, 0, 0, 0.01);
}
.myop {
  width: 20%;
  position: relative;
  margin-left: 0px;
  display: inline-block;
  text-align: right;
}
.menu {
  width: 80%;
  display: inline-block;
}
/* 上传头像样式 */
.avatar-uploader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.avatar-uploader > .ant-upload {
  width: 300px;
  height: 300px;
}
.avatar-uploader img {
  max-width: 300px;
  max-height: 300px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>